<template>
    <div class="p-2">
        <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
            :leave-active-class="proxy?.animate.searchAnimate.leave">
            <div class="mb-[10px]" v-show="showSearch">
                <el-card shadow="hover">
                    <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="68px" @submit.native.prevent>
                        <el-form-item label="工艺名称" prop="name">
                            <el-input v-model="queryParams.name" placeholder="请输入工艺名称" clearable style="width: 240px"
                                @keyup.enter="handleQuery" />
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" @click="handleQuery" icon="Search">搜索</el-button>
                            <el-button @click="resetQuery" icon="Refresh">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>
        </transition>

        <el-card shadow="hover">
            <template #header>
                <el-row :gutter="10">
                    <el-col :span="1.5">
                        <el-button type="primary" plain @click="openModal(0, { volume_interval })"
                            icon="Plus">新增</el-button>
                    </el-col>

                    <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
                </el-row>
            </template>
            <el-table ref="roleTableRef" v-loading="loading" :data="dataList">
                <el-table-column label="工艺名称" prop="name" align="center" /> 
                <el-table-column label="价格" prop="price" align="center" />
                <el-table-column label="工艺描述" prop="remark" align="center" />
                <el-table-column label="图片" align="center">
                    <template #default="scope">
                        <el-image :src="scope.row.imageUrl.split(',')[0]" :z-index="9999" preview-teleported
                            :preview-src-list="[scope.row.imageUrl.split(',')[0]]"
                            style="width: 100px; height: 100px" />
                    </template>
                </el-table-column>

                <el-table-column label="操作" align="center">
                    <template #default="scope">
                        <el-tooltip content="修改" placement="top">
                            <el-button @click="modifyClick(scope.row.id)" link type="primary" icon="Edit"></el-button>
                        </el-tooltip>
                        <el-tooltip content="删除" placement="top">
                            <el-button @click="deleteClick(scope.row.id)" link type="primary" icon="Delete"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>

            <pagination v-if="queryTotal > 0" v-model:total="queryTotal" v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize" @pagination="getList" />
        </el-card>

        <AddProcess :visible="modals[0].visible" :initList="modals[0].data" @submit="getList" @close="closeModal(0)" />
    </div>
</template>

<script setup lang="ts">
import { getProcessList, deleteProcess, getProcessDetail } from '@/api/accessoryManagement/index'
import { useModal } from '@/hooks/useModal'
import AddProcess from './components/addProcess.vue'
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { volume_interval } = toRefs<any>(proxy?.useDict('volume_interval'));

const { modals, openModal, closeModal } = useModal(1)

const queryParams = ref<any>({
    pageNum: 1,
    pageSize: 10,
    name: '',
})
const loading = ref(false)
const queryTotal = ref(0);
const dataList = ref<any>([])
const showSearch = ref(true)

const getList = async () => {
    loading.value = true
    try {
        const { rows, total } = await getProcessList(queryParams.value)
        queryTotal.value = total
        dataList.value = rows
        loading.value = false
    } catch (error) {
        loading.value = false
    }
}

/**
 * 修改配件pen
 */
const modifyClick = (id: number) => {
    openModal(0, (async () => {
        try {
            const { data } = await getProcessDetail(id)
            return {
                detailsObj: data,
                volume_interval,
                id
            }
        } catch (error) {
            console.log(error)
        }
    }))
}


/**
 * 删除配件
 */
const deleteClick = (id: number) => {
    ElMessageBox.confirm(
        '确定要删除此工艺吗?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            try {
                await deleteProcess({ id })
                proxy?.$modal.msgSuccess('删除成功');
                getList();
            } catch (error) {

            }
        })
}

onMounted(() => {
    getList()
})

/**
 * 搜索按钮操作
 */
const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getList();
}
/** 重置 */
const resetQuery = () => {
    queryParams.value?.resetFields();
    handleQuery();
}
</script>